<script setup>

import {reactive} from "vue";
import {DFT_ICONS} from "@jzl/icons";

const modelValue = defineModel()
const props = defineProps({
  // istyle: Object
})

const {
  styles,
  radiusTypes,
  // border,
  // borderRadiusType
} = reactive({
  styles: [
    {value: 'solid', label: '实线'},
    {value: 'dashed', label: '虚线'},
    {value: 'dotted', label: '点'}
  ],
  radiusTypes: [
    {value: 'unify', label: '统一设置'},
    {value: 'single', label: '独立设置'}
  ],
  /*border: {
    mode: 'default'
  },*/
  // borderRadiusType: 'unify'
})
</script>

<template>
  <div class="ele-prop-item">
    <el-form label-width="80px" label-position="top" size="mini" v-if="modelValue">
      <el-form-item label="">
        <el-radio-group v-model="modelValue.borderType">
          <el-radio-button label="default" v-tippy="{ arrow: true }" content="默认">
            <JIcon :icon="DFT_ICONS.inherit"/>
          </el-radio-button>
          <el-radio-button label="none" v-tippy="{ arrow: true }" content="清空">
            <JIcon :icon="DFT_ICONS.none"/>
          </el-radio-button>
          <el-radio-button label="custom" v-tippy="{ arrow: true }" content="自定义">
            <JIcon :icon="DFT_ICONS.custom"/>
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="modelValue.borderType === 'custom'">
        <el-form-item label="风格">
          <div style="margin-bottom: 5px;">
            <el-radio-group v-model="modelValue.borderStyleType" size="mini">
              <el-radio-button
                v-for="s in radiusTypes"
                :label="s.value"
                :key="s.value">{{ s.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <el-radio-group
            v-if="modelValue.borderStyleType === 'unify'"
            v-model="modelValue.borderStyle"
            size="mini">
            <el-radio-button
              v-for="s in styles"
              :label="s.value"
              :key="s.value"
            >{{ s.label }}</el-radio-button>
          </el-radio-group>
          <div v-if="modelValue.borderStyleType === 'single'">
            <div>
              <JIcon :icon="DFT_ICONS.borderTop" />
              <el-radio-group v-model="modelValue.borderTopStyle" size="mini">
                <el-radio-button v-for="s in styles" :label="s.value" :key="s.value">{{ s.label }}</el-radio-button>
              </el-radio-group>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderRight" />
              <el-radio-group v-model="modelValue.borderRightStyle" size="mini">
                <el-radio-button v-for="s in styles" :label="s.value" :key="s.value">{{ s.label }}</el-radio-button>
              </el-radio-group>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderBottom" />
              <el-radio-group v-model="modelValue.borderBottomStyle" size="mini">
                <el-radio-button v-for="s in styles" :label="s.value" :key="s.value">{{ s.label }}</el-radio-button>
              </el-radio-group>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderLeft" />
              <el-radio-group v-model="modelValue.borderLeftStyle" size="mini">
                <el-radio-button v-for="s in styles" :label="s.value" :key="s.value">{{ s.label }}</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="颜色">
          <div style="margin-bottom: 5px;">
            <el-radio-group v-model="modelValue.borderColorType" size="mini">
              <el-radio-button
                v-for="s in radiusTypes"
                :label="s.value"
                :key="s.value">{{ s.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <color-picker
            v-if="modelValue.borderColorType === 'unify'"
            v-model="modelValue.borderColor"
            show-alpha
            size="small"
          />
          <div v-else-if="modelValue.borderColorType === 'single'" style="display: flex;">
            <JIcon :icon="DFT_ICONS.borderTop" />
            <color-picker
              v-model="modelValue.borderTopColor"
              show-alpha
              size="small"
              style="margin-right: 5px;"
            ></color-picker>
            <JIcon :icon="DFT_ICONS.borderRight" />
            <color-picker
              v-model="modelValue.borderRightColor"
              show-alpha
              size="small"
              style="margin-right: 5px;"
            ></color-picker>
            <JIcon :icon="DFT_ICONS.borderBottom" />
            <color-picker
              v-model="modelValue.borderBottomColor"
              show-alpha
              size="small"
              style="margin-right: 5px;"
            ></color-picker>
            <JIcon :icon="DFT_ICONS.borderLeft" />
            <color-picker
              v-model="modelValue.borderLeftColor"
              show-alpha
              size="small"
            ></color-picker>
          </div>
        </el-form-item>
        <el-form-item label="宽度">
          <div style="margin-bottom: 5px;">
            <el-radio-group v-model="modelValue.borderWidthType" size="mini">
              <el-radio-button
                v-for="s in radiusTypes"
                :label="s.value"
                :key="s.value"
              >{{ s.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <el-input-number
            v-if="modelValue.borderWidthType === 'unify'"
            v-model="modelValue.borderWidth"
            controls-position="right" :min="0"
          />
          <div v-else-if="modelValue.borderWidthType === 'single'">
            <div>
              <JIcon :icon="DFT_ICONS.borderTop" />
              <el-input-number
                v-model="modelValue.borderTopWidth"
                controls-position="right"
                :min="0"
              />
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderRight" />
              <el-input-number
                v-model="modelValue.borderRightWidth"
                controls-position="right"
                :min="0"
              />
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderBottom" />
              <el-input-number
                v-model="modelValue.borderBottomWidth"
                controls-position="right"
                :min="0"
              />
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.borderLeft" />
              <el-input-number
                v-model="modelValue.borderLeftWidth"
                controls-position="right"
                :min="0"
              />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="圆角">
          <div style="margin-bottom: 5px;">
            <el-radio-group v-model="modelValue.borderRadiusType" size="mini">
              <el-radio-button
                v-for="s in radiusTypes"
                :label="s.value"
                :key="s.value">{{ s.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          <el-input-number
            v-if="modelValue.borderRadiusType === 'unify'"
            v-model="modelValue.borderRadius"
            controls-position="right"
            :min="0"
          />
          <div v-if="modelValue.borderRadiusType === 'single'">
            <div>
              <JIcon :icon="DFT_ICONS.radiusTl" />
              <el-input-number
                v-model="modelValue.borderTopLeftRadius"
                style="width:100px;"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.radiusTr" />
              <el-input-number
                v-model="modelValue.borderTopRightRadius"
                style="width:100px;"
                controls-position="right"
                :min="0"></el-input-number>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.radiusBl" />
              <el-input-number
                v-model="modelValue.borderBottomLeftRadius"
                style="width:100px;"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </div>
            <div>
              <JIcon :icon="DFT_ICONS.radiusTr" />
              <el-input-number
                v-model="modelValue.borderBottomRightRadius"
                style="width:100px;"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </div>
          </div>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
